"use client"
import { Navbar } from "@/components/ui/navbar"
import { ACCESS_TOKEN, REFRESH_TOKEN } from "@/constants"
import axios from "axios"
import { useState, useEffect } from "react"

export default function Home() {
  const [user, setUser] = useState<UserType | null>(null)
  const [recipes, setRecipes] = useState<RecipeType[]>([])
  const [categories, setCategories] = useState<CategoryType[]>([])

  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState<string | number>("all")

  // modal states
  const [showAuth, setShowAuth] = useState(false)
  const [showAddRecipe, setShowAddRecipe] = useState(false)
  const [loadingRecipes, setLoadingRecipes] = useState(false)
  const [viewingRecipe, setViewingRecipe] = useState<RecipeType | null>(null)
  const [showUserProfile, setShowUserProfile] = useState(false)

  useEffect(() => {
    const fetchRecipes = async () => {
      try {
        const res = await axios.get<RecipeType[]>(
          `${process.env.NEXT_PUBLIC_BACKEND_URL}/recipes/`,
          {
            params: {
              search: searchTerm,
              category: selectedCategory !== "all" ? selectedCategory : undefined,
            },
          }
        );
        setRecipes(res.data)
      } catch (error) {
        console.error("Error fetching recipes:", error)
      }
    };

    fetchRecipes();
  }, [searchTerm, selectedCategory])

  useEffect(() => {
    fetchCategories();
    fetchUser();
  }, []);

  const fetchCategories = async () => {
    try {
      const res = await axios.get<CategoryType[]>(
        `${process.env.NEXT_PUBLIC_BACKEND_URL}/categories/`
      );
      setCategories(res.data);
    } catch (error) {
      console.error("Error fetching recipoes:", error)
    } finally {
      setLoadingRecipes(false)
    }
  }

  const fetchUser = async () => {
    try {
      const res = await axios.get<UserType>(
        `${process.env.NEXT_PUBLIC_BACKEND_URL}/auth/profile/`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem(ACCESS_TOKEN)}`
          }
        }
      );
      setUser(res.data)
    } catch (error) {
      console.error("Error fetching user:", error);
    }
  }

  const handleLogout = () => {
    localStorage.removeItem(ACCESS_TOKEN)
    localStorage.removeItem(REFRESH_TOKEN)
    setUser(null)
    setShowAddRecipe(false)
    setViewingRecipe(null)
    setShowUserProfile(false)
  }

  console.log("Available recipes: ", recipes)
  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar
      handleLogout={handleLogout}
      setShowAddRecipe={setShowAddRecipe}
      setShowAuth={setShowAuth}
      setShowUserProfile={setShowUserProfile}
      user={user}
      />

      {
        showAuth &&
        <AuthModal 
        />
      }
    </div>
  )
}